<template>
  <div>
    <!-- 头部 -->
    <home-head></home-head>
    <!-- 头部 -->

    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img :src="item.picUrl">
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播 -->

    <div class="wrap">
      <!-- 宫格导航 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="nav">
        <van-grid :border="false" :column-num="5">
          <van-grid-item v-for="item in cates" :key="item.id" :icon="item.icon" :text="item.name"
            @click="clickGrid(item.id)" />
        </van-grid>
        <!-- 宫格导航 -->

        <!-- 猜你喜欢 -->
        <recommend :lives="lives" @click="Homeclick" @clickAddCart="AddCart"></recommend>
        <!-- 猜你喜欢 -->
      </van-pull-refresh>

    </div>

    <!-- 登录提示 -->
    <home-bottom></home-bottom>
    <!-- 登录提示 -->

    <!-- 返回顶部 -->
    <my-top></my-top>
    <!-- 返回顶部 -->

    <!-- tab切换栏 -->
    <my-tabbar></my-tabbar>
    <!-- tab切换栏 -->

    <!-- ajax请求自定义load插件 -->
    <!-- <loading></loading> -->
    <!-- ajax请求自定义load插件 -->

  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import MyTop from '@components/MyTop'
import HomeHead from './components/HomeHead'
import Recommend from './components/Recommend'
import HomeBottom from './components/HomeBottom'
import { mapActions } from 'vuex'

import { getCates, getHomeBanners, getRecommends } from '@api'
import { Toast } from 'vant'

// import Loading from '../../plugins/Loading/loading'

export default {
  name:'home',
  data () {
    return {
      banners: [],
      cates: [],
      lives: [],
      isLoading: false,
      isFirst: false
    }
  },
  created () {
    this.setBanner()
    this.setCates()
    this.setRecommends()
  },
  methods: {
    // 轮播
    setBanner () {
      getHomeBanners().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 分类
    setCates () {
      getCates().then(res => {
        if (res.data.code === 0) {
          // 截取一下，让最后一个 的 “猜你喜欢” 去除
          let arr = res.data.data.splice(res.data.data.length - 1, 1)
          this.cates = res.data.data
        }
      })
    },
    // 猜你喜欢
    setRecommends () {
      getRecommends().then(res => {
        this.isLoading = false
        // console.log(res);
        if (res.data.code === 0) {
          if (this.isFirst) {
            Toast('刷新完成了')
          }
          this.isFirst = true
          this.lives = res.data.data
        }
      })
    },
    // 下拉刷新
    onRefresh () {
      this.setRecommends()
    },
    // 处理 猜你喜欢传递过来的 id
    Homeclick (id) {
      // 点击 进去详情页,动态路由传递参数，先切换到 某某详情页，在传递参数
      this.$router.push(`/detail/${id}`)

      // this.$router.push({
      //   path:'/detail',
      //   query:{
      //     id
      //   }
      // })
    },
    // 处理 宫格导航点击商品去 详情页
    clickGrid (itemId) {
      this.$router.push(`/itemLists/${itemId}`)
    },
    // 处理 点击 加号 冒泡行为
    AddCart (item) {
      this.add_cart(item)
      // 初始化 加入商品 的 num 且 设置 加入商品后 ,复选框选中
      item.isChecked = true
      item.num = 1
      Toast('成功加入购物车')

    },
    // 处理点击商品是直接加入购物车还是 ++
    ...mapActions('cart', ['add_cart'])
  },
  components: {
    MyTabbar,
    HomeHead,
    Recommend,
    HomeBottom,
    MyTop,
    // Loading
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  img {
    width: 100%;
  }
  width: 95%;
  border-radius: 15px;
  margin: 0 auto;
  margin-top: -50px;
}

.nav {
  background-color: rgb(244, 244, 244);
  /deep/ .van-grid-item__content {
    background-color: transparent;
  }
  /deep/ .van-grid-item__content {
    padding-left: 1px;
    padding-right: 1px;
  }
}
</style>
